<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="automatic"
    @scroll="scroll"
    :refresher-enabled="false"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"></view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore></yy-nomore>
    </template>
    <view class="p-4 flex flex-col gap-[2.25rem]">
      <view class="flex flex-col gap-3">
        <view class="text-[1.75rem] text-[#171B24] font-medium"> 输入验证码 </view>
        <view class="text-[.75rem] text-[#919499]">
          未注册的手机号在接受协议并填入我们发送的验证码后将自动创建钓点达人账号</view
        >
      </view>
      <view class="">
        <u-message-input ref="messageInput" mode="bottomLine" focus :breathe="false" @finish="finish"></u-message-input>
      </view>
      <view class="flex flex-col gap-4">
        <view
          class="text-[.8125rem] font-medium text-center"
          :class="canResend ? 'text-[#00A9AB]' : 'text-[#919499]'"
          @click="resendCode"
        >
          {{ canResend ? '重新获取验证码' : `${countdown}秒后重新获取验证码` }}
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 控制页面滚动状态
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载数据
        countdown: 59, // 验证码倒计时秒数
        timer: null, // 倒计时定时器
        canResend: false, // 是否可以重新发送验证码
        mobile: '', // 手机号码
        captcha: '', // 验证码,
        loading: false
      }
    },

    onLoad(e) {
      this.mobile = e.mobile
      this.startCountdown()
    },

    onUnmounted() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    watch: {
      captcha(newValue, oldValue) {
        if (newValue.length == 4) {
          this.smsLogin()
        }
      }
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },

      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      },
      logOn() {},

      startCountdown() {
        this.canResend = false
        this.countdown = 59
        this.timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown--
          } else {
            clearInterval(this.timer)
            this.canResend = true
          }
        }, 1000)
      },
      async resendCode() {
        vk.pubfn.debounce(async () => {
          if (this.canResend) {
            // 这里添加重新发送验证码的逻辑
            let res = await api.sendSms({
              mobile: this.mobile,
              template_code: 'user_login'
            })
            this.captcha = ''

            if (!res.code) return vk.toast(res.msg, 'none')
            this.startCountdown()
          }
        }, 1000)
      },
      async smsLogin() {
        vk.showLoading('登录中...')

        if (!this.captcha) return vk.toast('请输入验证码', 'none')
        let res = await api.smsLogin({
          mobile: this.mobile,
          captcha: this.captcha
        })
        uni.hideLoading()

        if (!res.code) {
          vk.toast(res.msg, 'none')
          this.captcha = ''
          this.$refs.messageInput.clear()
          return
        }

        vk.setStorageSync('uni_id_token', res.data.userInfo.token)
        vk.setStorageSync('uni_id_token_expired', res.data.userInfo.expire_time)
        vk.setStorageSync('refresh_token', res.data.userInfo.refresh_token)
        // 设置一个
        vk.setVuex('$user.userInfo', res.data.userInfo)
        vk.navigateToHome('')
      },
      finish(e) {
        console.log('🚀 ~ finish ~ e:', e)
        this.captcha = e
      }
    }
  }
</script>

<style lang="scss" scoped></style>
